<!-- 条件渲染语句 -->
<script setup>
  import { ref } from "../node_modules/vue"
  const red = ref(true)
  const green = ref(true)
</script>

<template>
  <div>
    <!-- v-if -->
    <div class="red" v-if="red">
    </div>
    <!-- v-show -->
    <div class="green" v-show="green">
    </div>
    <button @click="red=!red">控制红色色块</button>
    <button @click="green=!green">控制绿色色块</button>
  </div>
</template>

<style scoped>
  .red {
    height: 250px;
    width: 250px;
    background-color: red;
  }

  .green {
    height: 250px;
    width: 250px;
    background-color: green;
  }
</style>